<script setup>
import { ref, computed } from 'vue'
import { useExerciseStore } from '../stores/exercise'

/**
 * 获取运动状态管理
 */
const exerciseStore = useExerciseStore()

/**
 * 当前活跃标签
 */
const activeTab = ref('today')

/**
 * 切换标签
 * @param {string} tab - 标签名称
 */
const switchTab = (tab) => {
  activeTab.value = tab
}

/**
 * 添加运动记录
 * @param {Object} exercise - 运动对象
 */
const addExercise = (exercise) => {
  exerciseStore.addExercise({
    type: exercise.name,
    duration: exercise.duration,
    caloriesBurned: Math.round(exercise.caloriesPerHour * (exercise.duration / 60)),
    time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  })
}

/**
 * 获取今天的星期几
 * @returns {string} - 星期几（中文）
 */
const getTodayWeekday = () => {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return weekdays[new Date().getDay()]
}

/**
 * 获取运动强度对应的颜色
 * @param {string} intensity - 运动强度
 * @returns {string} - 颜色类名
 */
const getIntensityColor = (intensity) => {
  const colors = {
    '低': 'green',
    '中等': 'orange',
    '高': 'red'
  }
  return colors[intensity] || 'green'
}
</script>

<template>
  <div class="exercise-view">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <h1>运动计划</h1>
    </div>
    
    <!-- 运动数据卡片 -->
    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-icon steps">
          <i class="fas fa-shoe-prints"></i>
        </div>
        <div class="stat-content">
          <span class="stat-label">今日步数</span>
          <div class="stat-value-container">
            <span class="stat-value">{{ exerciseStore.steps }}</span>
            <span class="stat-unit">步</span>
          </div>
          <div class="progress-bar">
            <div 
              class="progress-filled" 
              :style="`width: ${exerciseStore.stepsProgress}%`"
            ></div>
          </div>
          <span class="stat-target">目标: {{ exerciseStore.stepsTarget }}步</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon calories">
          <i class="fas fa-fire-alt"></i>
        </div>
        <div class="stat-content">
          <span class="stat-label">消耗热量</span>
          <div class="stat-value-container">
            <span class="stat-value">{{ exerciseStore.caloriesBurned }}</span>
            <span class="stat-unit">kcal</span>
          </div>
          <div class="progress-bar">
            <div 
              class="progress-filled" 
              :style="`width: ${exerciseStore.caloriesProgress}%`"
            ></div>
          </div>
          <span class="stat-target">目标: {{ exerciseStore.caloriesTarget }}kcal</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon time">
          <i class="fas fa-stopwatch"></i>
        </div>
        <div class="stat-content">
          <span class="stat-label">运动时间</span>
          <div class="stat-value-container">
            <span class="stat-value">{{ exerciseStore.exerciseTime }}</span>
            <span class="stat-unit">分钟</span>
          </div>
          <div class="progress-bar">
            <div 
              class="progress-filled" 
              :style="`width: ${exerciseStore.exerciseTimeProgress}%`"
            ></div>
          </div>
          <span class="stat-target">目标: {{ exerciseStore.exerciseTimeTarget }}分钟</span>
        </div>
      </div>
    </div>
    
    <!-- 标签切换 -->
    <div class="tabs">
      <div 
        class="tab" 
        :class="{ active: activeTab === 'today' }"
        @click="switchTab('today')"
      >
        今日运动
      </div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'plan' }"
        @click="switchTab('plan')"
      >
        运动计划
      </div>
    </div>
    
    <!-- 今日运动 -->
    <div v-if="activeTab === 'today'" class="today-content">
      <div class="exercise-log">
        <h2 class="section-title">今日运动记录</h2>
        
        <div v-if="exerciseStore.exerciseLog.length === 0" class="empty-state">
          <i class="fas fa-running"></i>
          <p>今天还没有记录运动，从下方推荐运动中添加或自行记录</p>
        </div>
        
        <div v-else class="exercise-list">
          <div 
            v-for="exercise in exerciseStore.exerciseLog" 
            :key="exercise.id"
            class="exercise-item"
          >
            <div class="exercise-icon">
              <i class="fas" :class="{
                'fa-walking': exercise.type.includes('走'),
                'fa-running': exercise.type.includes('跑'),
                'fa-swimmer': exercise.type.includes('游'),
                'fa-dumbbell': exercise.type.includes('训练') || exercise.type.includes('铃'),
                'fa-bicycle': exercise.type.includes('骑'),
                'fa-yoga': exercise.type.includes('瑜伽'),
                'fa-heartbeat': true
              }"></i>
            </div>
            <div class="exercise-info">
              <h3>{{ exercise.type }}</h3>
              <div class="exercise-details">
                <span>{{ exercise.time }}</span>
                <span>{{ exercise.duration }}分钟</span>
                <span>{{ exercise.caloriesBurned }}kcal</span>
                <span v-if="exercise.distance">{{ exercise.distance }}km</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="recommended-exercises">
        <h2 class="section-title">推荐运动</h2>
        <div class="suggestions">
          <div 
            v-for="exercise in exerciseStore.recommendedExercises" 
            :key="exercise.id"
            class="suggestion-card"
            @click="addExercise(exercise)"
          >
            <div class="suggestion-image">
              <img :src="exercise.image" :alt="exercise.name">
            </div>
            <div class="suggestion-content">
              <div class="suggestion-header">
                <h3>{{ exercise.name }}</h3>
                <span 
                  class="intensity-badge" 
                  :class="getIntensityColor(exercise.intensity)"
                >
                  {{ exercise.intensity }}
                </span>
              </div>
              <p class="suggestion-description">{{ exercise.description }}</p>
              <div class="suggestion-stats">
                <div class="stat">
                  <i class="fas fa-fire-alt"></i>
                  <span>{{ exercise.caloriesPerHour }}kcal/小时</span>
                </div>
                <div class="stat">
                  <i class="fas fa-clock"></i>
                  <span>{{ exercise.duration }}分钟</span>
                </div>
              </div>
            </div>
            <div class="add-btn">
              <i class="fas fa-plus"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 周计划 -->
    <div v-else-if="activeTab === 'plan'" class="plan-content">
      <div class="today-plan">
        <h2 class="section-title">今日计划 ({{ getTodayWeekday() }})</h2>
        <div class="today-exercises">
          <div 
            v-for="(exercise, index) in exerciseStore.todayExercises" 
            :key="index"
            class="plan-item"
          >
            <div class="plan-time">{{ exercise.time }}</div>
            <div class="plan-exercise">
              <div class="plan-icon">
                <i class="fas" :class="{
                  'fa-walking': exercise.name.includes('走'),
                  'fa-running': exercise.name.includes('跑'),
                  'fa-swimmer': exercise.name.includes('游'),
                  'fa-dumbbell': exercise.name.includes('训练') || exercise.name.includes('力量'),
                  'fa-bicycle': exercise.name.includes('骑'),
                  'fa-yoga': exercise.name.includes('瑜伽'),
                  'fa-heartbeat': true
                }"></i>
              </div>
              <div class="plan-details">
                <h3>{{ exercise.name }}</h3>
                <p>{{ exercise.duration }}分钟</p>
              </div>
              <button class="start-btn">
                <i class="fas fa-play"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="weekly-plan">
        <h2 class="section-title">周计划</h2>
        <div class="plan-grid">
          <div 
            v-for="(plan, day) in exerciseStore.weeklyPlan" 
            :key="day"
            class="day-plan"
          >
            <div class="day-header">
              <span class="day-name">{{ day === 'monday' ? '周一' : 
                                      day === 'tuesday' ? '周二' : 
                                      day === 'wednesday' ? '周三' : 
                                      day === 'thursday' ? '周四' : 
                                      day === 'friday' ? '周五' : 
                                      day === 'saturday' ? '周六' : '周日' }}</span>
              <span class="exercise-count">{{ plan.length }}项</span>
            </div>
            <div class="day-exercises">
              <div v-for="(exercise, index) in plan.slice(0, 2)" :key="index" class="day-exercise">
                {{ exercise.name }} {{ exercise.duration > 0 ? `(${exercise.duration}分钟)` : '' }}
              </div>
              <div v-if="plan.length > 2" class="more">还有 {{ plan.length - 2 }} 项...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加按钮 -->
    <div class="add-fab">
      <i class="fas fa-plus"></i>
    </div>
  </div>
</template>

<style scoped>
.exercise-view {
  position: relative;
  padding-bottom: 80px;
}

/* 导航栏 */
.nav-bar {
  padding: 16px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

.nav-bar h1 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
  font-weight: 600;
}

/* 数据卡片 */
.stats-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  margin-right: 16px;
  flex-shrink: 0;
}

.steps {
  background-color: #3B82F6;
}

.calories {
  background-color: #F59E0B;
}

.time {
  background-color: #22C55E;
}

.stat-content {
  flex: 1;
}

.stat-label {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 4px;
}

.stat-value-container {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.stat-unit {
  font-size: 0.875rem;
  color: #666;
  margin-left: 4px;
}

.progress-bar {
  height: 6px;
  background-color: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-filled {
  height: 100%;
  background-color: #22C55E;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.stat-target {
  font-size: 0.75rem;
  color: #666;
}

/* 标签切换 */
.tabs {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 1rem;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #22C55E;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 3px;
  background-color: #22C55E;
  border-radius: 3px 3px 0 0;
}

/* 今日运动内容 */
.today-content, 
.plan-content {
  padding: 0 16px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  color: #333;
  font-weight: 600;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  color: #9ca3af;
  margin-bottom: 24px;
}

.empty-state i {
  font-size: 2rem;
  margin-bottom: 12px;
}

.empty-state p {
  text-align: center;
  margin: 0;
  font-size: 0.9375rem;
}

.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.exercise-item {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.exercise-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(34, 197, 94, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #22C55E;
  margin-right: 12px;
  flex-shrink: 0;
}

.exercise-info {
  flex: 1;
}

.exercise-info h3 {
  margin: 0;
  font-size: 1rem;
  color: #333;
  margin-bottom: 4px;
}

.exercise-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: #666;
}

/* 推荐运动 */
.recommended-exercises {
  margin-bottom: 24px;
}

.suggestions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-card {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
}

.suggestion-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.suggestion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suggestion-content {
  flex: 1;
  padding: 12px;
}

.suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.suggestion-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #333;
}

.intensity-badge {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  color: white;
}

.intensity-badge.green {
  background-color: #22C55E;
}

.intensity-badge.orange {
  background-color: #F59E0B;
}

.intensity-badge.red {
  background-color: #EF4444;
}

.suggestion-description {
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-stats {
  display: flex;
  gap: 12px;
}

.suggestion-stats .stat {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #666;
}

.suggestion-stats .stat i {
  color: #22C55E;
  margin-right: 4px;
  font-size: 0.75rem;
}

.add-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #22C55E;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

/* 周计划内容 */
.today-plan {
  margin-bottom: 24px;
}

.today-exercises {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-item {
  display: flex;
  flex-direction: column;
}

.plan-time {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 4px;
}

.plan-exercise {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.plan-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(34, 197, 94, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #22C55E;
  margin-right: 12px;
  flex-shrink: 0;
}

.plan-details {
  flex: 1;
}

.plan-details h3 {
  margin: 0;
  font-size: 1rem;
  color: #333;
  margin-bottom: 4px;
}

.plan-details p {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.start-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #22C55E;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
}

/* 周计划 */
.weekly-plan {
  margin-bottom: 24px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.day-plan {
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.day-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.day-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
}

.exercise-count {
  font-size: 0.75rem;
  color: #666;
}

.day-exercises {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-exercise {
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more {
  font-size: 0.75rem;
  color: #22C55E;
  margin-top: 4px;
}

/* 添加按钮 */
.add-fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #22C55E;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.4);
  z-index: 10;
  cursor: pointer;
}
</style> 